<template>
  <div class="message-list">
    <div v-if="messages.length === 0" class="empty-state">
      <el-empty description="暂无消息" />
    </div>
    
    <div v-else class="messages">
      <div
        v-for="message in messages"
        :key="message.id"
        class="message-item"
        :class="{ 'unread': !message.isRead }"
        @click="handleMessageClick(message)"
      >
        <div class="message-header">
          <div class="message-title">
            <el-icon v-if="!message.isRead" class="unread-icon">
              <CircleCheck />
            </el-icon>
            <span>{{ message.title }}</span>
            <el-tag
              v-if="message.priority === 'high'"
              size="small"
              type="danger"
              class="priority-tag"
            >
              高优先级
            </el-tag>
          </div>
          <div class="message-time">{{ formatTime(message.createTime) }}</div>
        </div>
        
        <div class="message-content">
          {{ message.content }}
        </div>
        
        <div class="message-actions">
          <el-button
            v-if="!message.isRead"
            size="small"
            type="primary"
            @click.stop="markAsRead(message.id)"
          >
            标记已读
          </el-button>
          <el-button
            size="small"
            @click.stop="viewDetail(message)"
          >
            查看详情
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { CircleCheck } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

/**
 * 消息列表组件
 * @description 显示消息列表，支持标记已读和查看详情
 */

// 定义props
const props = defineProps({
  messages: {
    type: Array,
    default: () => []
  }
})

// 定义emits
const emit = defineEmits(['read', 'detail'])

/**
 * 处理消息点击
 * @param {Object} message - 消息对象
 */
const handleMessageClick = (message) => {
  if (!message.isRead) {
    markAsRead(message.id)
  }
  viewDetail(message)
}

/**
 * 标记为已读
 * @param {number} messageId - 消息ID
 */
const markAsRead = (messageId) => {
  emit('read', messageId)
}

/**
 * 查看详情
 * @param {Object} message - 消息对象
 */
const viewDetail = (message) => {
  emit('detail', message)
  ElMessage.info(`查看消息详情: ${message.title}`)
}

/**
 * 格式化时间
 * @param {string} timeStr - 时间字符串
 * @returns {string} 格式化后的时间
 */
const formatTime = (timeStr) => {
  const date = new Date(timeStr)
  const now = new Date()
  const diff = now - date
  
  // 小于1分钟
  if (diff < 60000) {
    return '刚刚'
  }
  
  // 小于1小时
  if (diff < 3600000) {
    return `${Math.floor(diff / 60000)}分钟前`
  }
  
  // 小于24小时
  if (diff < 86400000) {
    return `${Math.floor(diff / 3600000)}小时前`
  }
  
  // 小于7天
  if (diff < 604800000) {
    return `${Math.floor(diff / 86400000)}天前`
  }
  
  // 超过7天显示具体日期
  return date.toLocaleDateString()
}
</script>

<style scoped>
.message-list {
  min-height: 200px;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.message-item {
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
}

.message-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.message-item.unread {
  border-left: 4px solid #409eff;
  background-color: #f0f9ff;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.message-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #303133;
}

.unread-icon {
  color: #409eff;
  font-size: 14px;
}

.priority-tag {
  margin-left: 8px;
}

.message-time {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
}

.message-content {
  color: #606266;
  line-height: 1.5;
  margin-bottom: 10px;
  word-break: break-word;
}

.message-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
</style> 